<template>
  <div class="ef-node-form">
    <div class="ef-node-form-header">
        编辑
    </div>
    <div class="ef-node-form-body">
        <el-form :model="node" label-width="120px" v-if="node.name">
          <template v-for="(prop, key) in node.property">
            <work-sheet-form :formLable="key" :key="key" :prop="prop" :formCascade="formCascade" v-if="prop.type === 'Worksheet'"/>
          </template>
          <div v-for="(prop, key) in node.property" :key="key">
            <el-form-item :label="key" v-if="prop.type === 'String'">
              <el-input size="mini" v-model="prop.default"></el-input>
            </el-form-item>
            <el-form-item :label="key" v-if="prop.type === 'Number'">
              <el-input-number size="mini" v-model="prop.default"></el-input-number>
            </el-form-item>
            <el-form-item :label="key" v-if="prop.type === 'Boolean'">
              <el-switch v-model="prop.default" />
            </el-form-item>
            <el-form-item :label="key" v-if="prop.type === 'File'">
              <div class="upload-node">
                  <el-button size="mini" @click="handleSelectFile(key)">选择文件</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import {uploadFile} from "../../api/workflow"
import { getAppCascadeData, getFilterDataList } from "@/api/worksheet";

import WorkSheetForm from './components/workSheetForm.vue';

export default {
  props: {
    node: Object
  },
  components:{
    WorkSheetForm
  },
  data() {
    return {
      // node 或 line
      type: "node",
      line: {},
      data: {},
      formCascade: [],
      modelData: {},
      stateList: [
        {
          state: "success",
          label: "成功"
        },
        {
          state: "warning",
          label: "警告"
        },
        {
          state: "error",
          label: "错误"
        },
        {
          state: "running",
          label: "运行中"
        }
      ]
    };
  },
  computed:{
  },
  methods: {
    handleSelectFile(key) {
      let _this = this
      let inputObj = document.createElement("input");
      inputObj.setAttribute("type", "file");
      inputObj.setAttribute("style", "visibility:hidden");
      inputObj.setAttribute("multiple", "multiple");
      document.body.appendChild(inputObj);
      inputObj.click();
      inputObj.addEventListener("change",async e => {
        let files = e.target.files
        if(files) {
          let formData = new FormData()
          files.forEach((file, index) => formData.append("file" + index, file))
          if(_this.node.property[key].default !== "") {
            formData.append("oldpath", _this.node.property[key].default);
          }
          let data = await uploadFile(formData)
          this.$message.success("上传成功");
          _this.node.property[key].default = data
        }
      });
    },
    handleSelectFileDir(key) {
      let inputObj = document.createElement("input");
      inputObj.setAttribute("type", "file");
      inputObj.setAttribute("style", "visibility:hidden");
      inputObj.setAttribute("webkitdirectory", true);
    //   inputObj.setAttribute("directory ", true);
      document.body.appendChild(inputObj);
      inputObj.click();
      // inputObj.addEventListener("change", e => {
      //   // this.node.property[key].default = e.target.value
      //   console.log(e.target);
      // });
    },
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = "node";
      this.data = data;
      data.nodeList.filter(node => {
        if (node.id === id) {
          this.node = cloneDeep(node);
        }
      });
    },
    lineInit(line) {
      this.type = "line";
      this.line = line;
    },
    // 修改连线
    saveLine() {
      this.$emit("setLineLabel", this.line.from, this.line.to, this.line.label);
    },
    save() {
      this.data.nodeList.filter(node => {
      });
    }
  },
  watch:{
    node:{
      deep: true,
      handler(){
        for (const key in this.node.property) {
          let element = this.node.property[key];
          if(element.type === "Model"){
            element.default = this.modelData
          }
        }
      }
    }
  },
  async mounted(){
    let data = await getAppCascadeData()
    this.formCascade = data
    
    let d = await getFilterDataList({
      "worksheetId": '6233f2c7d11d8e48c4f3cc3c',
      "pageSize": 10000,  
      "pageNo": 1,   
      "sortField": "",   
      "isAsc": false,  
      "keywords": "",   
      "filters": []
    })
    let modelObj = {}
    for (let i = 0; i < d.length; i++) {
      const element = d[i];
      modelObj[element['input112126']] = element['model104729'][0].url
    }
    this.modelData = modelObj
  }
};
</script>
<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}

.upload-node {
  display: flex;
}
.file-name {
  overflow: hidden;
  width: 100px;
  /* height: 30px; */
}
.file-name input{
  border: none !important;
  font-size: 12px;
  color: white;
}

.el-form-item .ant-cascader-picker{
  background: transparent;
  color: #fff;
}
</style>
